<!-- 运营统计 -->
<template>
  <div class="operateStatic">
    <div class="tip">
      <span>截至{{ nowaday }}，年度安全运营天数 <span class="count">3618</span>天
      </span>
    </div>
    <div class="chart-part">
      <div id="operateChart" :style="{ width: '100%', height: '100%' }"></div>
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { watchLineData } from '@/store'

const nowaday = ref(dayjs().format("YYYY-MM-DD"));

onMounted(async () => {
  // 监听pinia仓库中的lineData
  const lineData = await watchLineData();
  initChart(lineData);
});

// 运营统计图表
const operateOpts = (dataSource) => {
  const img2 =
    "";
  const img =
    "";
  // 所有线路运营长度
  const sum = dataSource.reduce((cur, pre) => {
    return cur + pre.value;
  }, 0);
  const data = [];
  const legendData = [];
  // 图表颜色
  const lineColors = [
    "#218acd",
    "#f794bd",
    "#f0c996",
    "#b3cf3c",
    "#e0e0e0",
    "#117241",
    "#f69a09",
    "#9dc0c8",
  ];
  dataSource.forEach((item, index) => {
    const { name, value } = item;
    let legendName = name.slice(-3) + "--" + value.toFixed(1) + "公里";
    legendData.push(legendName);
    data.push(
      {
        value: value.toFixed(0),
        name: legendName,
        itemStyle: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: lineColors[index],
          shadowColor: lineColors[index],
        },
      },
      {
        value: sum / 25,
        name: "",
        itemStyle: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      }
    );
  });
  const seriesOption = [
    {
      name: "",
      type: "pie",
      radius: [55, 59],
      center: ["18.4%", "center"],
      emphasis: {
        scale: false,
      },
      label: {
        show: false,
      },
      data: data,
    },
  ];

  const option = {
    backgroundColor: "rgba(0,0,0,0)",
    color: lineColors,
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img2,
            width: 90,
            height: 90,
          },
          left: "9.4%",
          top: "center",
          position: [50, 50],
        },
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 30,
            height: 30,
          },
          left: "15.6%",
          top: "32%",
          position: [60, 100],
        },
        {
          type: "text",
          z: 3,
          style: {
            text: sum.toFixed(1),
            fill: "#fff",
            fontWeight: 400,
            fontSize: 12,
          },
          left: "15.5%",
          top: "60%",
          position: [100, 100],
        },
        {
          type: "text",
          z: 3,
          style: {
            text: "线路运营长度",
            fill: "#fff",
            fontWeight: 400,
            fontSize: 12,
          },
          left: "11.5%",
          top: "52%",
          position: [100, 100],
        },
        {
          type: "image",
          z: 3,
          style: {
            image: img2,
            width: 140,
            height: 140,
          },
          left: "4.5%",
          top: "center",
          position: [150, 150],
        },
      ],
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      icon: "roundRect",
      orient: "horizontal",
      data: legendData,
      right: 50,
      top: 30,
      align: "right",
      textStyle: {
        color: "#fff",
      },
      itemGap: 19,
      itemWidth: 20,
      itemHeight: 10,
      width: 380,
      itemStyle: {
        shadowColor: "rgba(0, 0, 0, 0.5)",
        shadowBlur: 12,
      },
    },
    series: seriesOption,
  };

  return option;
};
const initChart = (dataSource) => {
  const myChart = echarts.init(document.getElementById("operateChart"));
  const data = dataSource.map((item) => ({
    name: item.name,
    value: Number(item.length),
  }));
  const options = operateOpts(data);
  myChart.setOption(options);
};
</script>
<style scoped>
.operateStatic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tip {
  height: 30px;
  width: 100%;
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
}

.count {
  font-size: 26px;
  color: #11ff00a4;
  letter-spacing: 3px;
}

.chart-part {
  flex: 1;
  display: flex;
  pointer-events: all;
  padding-left: 10px;
}

#operateChart {
  pointer-events: all;
}

.dataList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.data-item {
  width: 50%;
  color: #fff;
}
</style>